<template>
	<view class="remove_tabbar content">
		<view class="user_info">
			<view class="dis aic jcsb">
				<view class="dis aic ">
					<view class="aravat_box dis aic jcc">
						<image class="aravat" v-if="userInfo" :src="userInfo.avatar" mode="widthFix"></image>
						<image class="aravat" v-else src="/static/image/df_aravat.png" mode="widthFix"></image>
					</view>
					<view class="" v-if="userInfo">
						<view class="dis aic ">
							<view class="nike_name">
								{{userInfo.nickName}}
							</view>
							<!-- 	<view class="live">
								<image src="/static/icon/live1.png" mode="widthFix" style="width: 100%;"></image>
							</view> -->
						</view>
						<view class="ID" @click="goWallet">
							余额：{{userInfo.amount}}
						</view>
					</view>
				</view>
				<view class="mr54" v-if="userInfo">
					<view class="dis aic jcc" @click="goEdit">
						<view class="edit">
							编辑个人信息
						</view>
						<image src="/static/icon/icon_right.png" class="right" mode="widthFix"></image>
					</view>
					<view :class="[alreadyCheckIn ? 'readyqiandao' : 'qiandao']" @click="registerClick">
						{{alreadyCheckIn ? '已签到' : '签到'}}
					</view>
				</view>
			</view>
			<view class="dis aic jcc mt54 mb40">
				<view class="data_li" @click="follow">
					<view class="num">{{number.followNumber}}</view>
					<view class="name">粉丝</view>
				</view>
				<view class="data_li" @click="myfollow">
					<view class="num">{{number.isFollowNumber}}</view>
					<view class="name">关注</view>
				</view>
				<view class="data_li">
					<view class="num">{{number.likeNumber}}</view>
					<view class="name">点赞</view>
				</view>
				<view class="data_li">
					<view class="num">{{number.commentNumber}}</view>
					<view class="name">评论</view>
				</view>
				<view class="data_li" @click="goPointsList">
					<view class="num">{{number.integral}}</view>
					<view class="name">积分</view>
				</view>
			</view>
			<view class="vip_box dis aic jcsb mr0a mb30">
				<view class="">
					<view class="dis aic jcsb">
						<view class="vip_title">
							开通趣校源会员卡
						</view>
						<view class="vip">
							<image src="/static/icon/vip.png" mode="widthFix" style="width: 100%;"></image>
						</view>
					</view>
					<view class="vip_tips">
						尽享会员权益
					</view>
				</view>
				<view class="next">
					立即开通
				</view>
			</view>
		</view>
		<view class="function">
			<view class="function_box">
				<view class="function_li dis aic jcsb">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_08.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							会员中心
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view>
				<view class="function_li dis aic jcsb " @click="goPointsMall">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_09.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							积分-积分商城
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view>
				<view class="function_li dis aic jcsb " @click="goRecord">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_09.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							积分兑换记录
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view>
				<view class="function_li dis aic jcsb border-none" @click="goposts">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_10.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							我的贴子
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view>
			</view>
			<view class="function_box" @click="goAuthentication">
				<view class="function_li dis aic jcsb border-none">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_11.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							实名认证
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view>
				<!-- <view class="function_li dis aic jcsb border-none" @click="bindphone">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_12.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							绑定手机
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view> -->

			</view>
			<view class="function_box" @click='goprivacy'>
				<view class="function_li dis aic jcsb border-none">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_13.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							隐私协议
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view>
			</view>
			<view class="function_box" @click='gofeedback'>
				<view class="function_li dis aic jcsb border-none">
					<view class="dis aic jcc">
						<image src="/static/icon/icon_14.png" mode="widthFix" class="logo_img"></image>
						<view class="logo_name">
							建议反馈
						</view>
					</view>
					<image src="/static/icon/icon_right.png" mode="widthFix" class="logo_right"></image>
				</view>
			</view>
		</view>
		<!-- 底部tabbar -->
		<Tabbar :current-page="currentPage"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/compontents/Tabbar.vue'
	import {
		getMemberInfo,
		memberNumber,
		register,
		getRegisterByNow
	} from '@/api.js'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				currentPage: 'my',
				userInfo: {},
				number: {},
				alreadyCheckIn: false
			}
		},
		onShow() {
			this.init()
		},
		onLoad(options) {
			uni.$on('refreshData', () => {
				console.log('返回了');
				this.init()
			});
		},
		methods: {
			goAuthentication() {
				uni.navigateTo({
					url: '/pages/my/authentication'
				})
			},
			init() {
				this.getUserInfo()
				this.getMemberNumber()
				this.RegisterByNow()
			},
			async RegisterByNow() {
				let res = await getRegisterByNow()
				console.log('是否签到', res.result);
				this.alreadyCheckIn = res.result
			},

			goRecord() {
				uni.navigateTo({
					url: '/pages/shop/exchangeRecords'
				})
			},

			goposts() {
				uni.navigateTo({
					url: '/pages/my/posts'
				})
			},
			goEdit() {
				uni.navigateTo({
					url: '/pages/my/editUser'
				})
			},
			myfollow() {
				uni.navigateTo({
					url: '/pages/my/myFollowList'
				})
			},
			follow() {
				uni.navigateTo({
					url: '/pages/my/followList'
				})
			},
			goWallet() {
				uni.navigateTo({
					url: '/pages/my/wallet'
				})
			},
			gofeedback() {
				uni.navigateTo({
					url: '/pages/my/feedback'
				})
			},
			bindphone() {
				uni.navigateTo({
					url: '/pages/my/bindphone'
				})
			},
			goprivacy() {
				uni.navigateTo({
					url: '/pages/my/privacy'
				})
			},
			async registerClick() {
				if (this.alreadyCheckIn) {
					return
				}
				let res = await register()
				if (res.code == 200) {
					uni.showToast({
						icon: "none",
						title: '签到成功'
					})
					this.getUserInfo()
					this.getMemberNumber()
				}
			},
			async getMemberNumber() {
				let res = await memberNumber()
				this.number = res.result

			},
			async getUserInfo() {
				let res = await getMemberInfo()
				this.userInfo = res.result
				uni.setStorage({
					key: 'userInfo',
					data: JSON.stringify(res.result),
				});
				if (!this.userInfo.schoolId || this.userInfo.schoolId == '') {
					uni.reLaunch({
						url: '/pages/login/chooseSchool'
					})
				}
			},
			goPointsMall() {
				uni.navigateTo({
					url: '/pages/shop/pointsShop'
				})
			},
			goPointsList() {
				uni.navigateTo({
					url: '/pages/my/pointsMall'
				})
			},



		},
	}
</script>

<style lang="scss">
	.user_info {
		padding-top: 20rpx;

		.aravat_box {
			background: #fff;
			width: 126rpx;
			height: 126rpx;
			border-radius: 50% 50%;
			overflow: hidden;
			margin-left: 20rpx;
			margin-right: 24rpx;

			.aravat {
				width: 126rpx;
				height: 126rpx;
			}
		}

		.nike_name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
		}

		.live {
			width: 50rpx;

		}

		.qiandao {
			width: 146rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #F6D44D;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-top: 18rpx;

		}

		.readyqiandao {
			width: 146rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: rgba(218, 255, 240, 0.6);
			color: rgba(0, 199, 119, 0.6);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 18rpx;
		}

		.ID {
			padding: 6rpx 20rpx;
			height: 46rpx;
			background: #FAFDF9;
			border-radius: 23rpx 23rpx 23rpx 23rpx;
			text-align: center;
			line-height: 46rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #5FAF85;
			margin-top: 14rpx;
		}

		.edit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #747474;
		}

		.right {
			width: 12rpx;
			margin-left: 16rpx;
		}

		.vip_box {
			width: 690rpx;
			height: 120rpx;
			background: #F6D44D;
			border-radius: 23rpx 23rpx 23rpx 23rpx;
			padding: 22rpx 30rpx;
			box-sizing: border-box;

			.vip_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.vip {
				width: 72rpx;
			}

			.vip_tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
			}

			.next {
				width: 146rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7A7A7A;
			}
		}

		.data_li {
			width: calc(690rpx / 5);
			text-align: center;

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				width: calc(690rpx / 4);

			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				width: calc(690rpx / 4);
			}
		}

	}

	.function {
		background: #F5F7FB;
		width: 750rpx;
		padding: 16rpx 30rpx;
		box-sizing: border-box;

		.function_box {
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			background: #fff;
			margin-bottom: 20rpx;

			.function_li {

				padding: 30rpx 0;
				margin: 0 30rpx;
				border-bottom: 1rpx solid #DADADA;

				.logo_img {
					width: 34rpx;
				}

				.logo_name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					margin-left: 8rpx;
				}

				.logo_right {
					width: 12rpx;
				}
			}
		}
	}

	.mr54 {
		margin-right: 54rpx;
	}

	.mt54 {
		margin-top: 54rpx;
	}

	.mb40 {
		margin-bottom: 40rpx;
	}

	.mb30 {
		margin-bottom: 30rpx;
	}

	.border-none {
		border: none !important;
	}
</style>